<template>
    <div class="bg-white not-select opr-box" id="page-box">

        <div class="controls" :class="{ 'active': activeControls === 1 }" >
        <t-row >
            <t-col :span="24">
                <div>
                    <div class="img-list footer-common-box" >
                        <div class="right-box horizontal-box">
                            <view v-for="(item, index) in tabList" :key="index"
                                  :class="`card`">
                                <div :value="item.value" icon="none"  @click="changeTab(item)">
                                    <div class="p-3px">
                                        <div class="opr-icon">
                                          <SvgIcon :name="item.svgIcon" class="m-auto tab-svg-fill" :size="item.svgSize"/>
                                        </div>
                                        <div class="label-text">{{ item.label }}</div>
                                    </div>
                                </div>
                            </view>
                        </div>
                    </div>
                </div>
            </t-col>
        </t-row>
        </div>
        <div class="controls"  :class="{ 'active': activeControls === 2 }">
            <t-row >
                <t-col :span="24">
                    <div>
                        <div class="img-list footer-radio-box justify-content-left" >
                            <div class="left-box ">
                                <view :class="`card`">
                                    <div >
                                        <div class="p-3px">
                                            <t-button size="small" theme="primary" variant="dashed"  @click="hidePanel">
                                                <t-icon name="chevron-down-double-s" size="25px"></t-icon>
                                            </t-button>
                                        </div>
                                    </div>
                                </view>
                            </div>

                            <div class="right-box horizontal-box">
                                <template v-for="(com, index) in componentList" :key="com.name">
                                    <template v-if="com.visual">
                                        <component :is="com.component" />
                                    </template>
                                </template>
                            </div>
                        </div>
                    </div>
                </t-col>
            </t-row>
        </div>
        <graph-popup ref="graphPopupRef" @success="addImg"></graph-popup>
        <background-page ref="backgroundPageRef"></background-page>
        <template-popup ref="templatePopupRef"></template-popup>
    </div>
</template>
<script setup lang="ts">
import SvgIcon from "@/components/svgIcon/svgIcon.vue";
import {Text,Image as LeaferImage, ImageEvent} from 'leafer-ui'
import {SuccessContext, Toast} from "tdesign-mobile-vue";
import {useEditor} from "@/views/Editor/app";
import CommonPanel from "./panel/commonPanel.vue";
import TextPanel from "./panel/textPanel.vue";
import ImagePanel from "./panel/imagePanel.vue";
import GroupPanel from "./panel/groupPanel.vue";
import BackgroundPanel from "./panel/backgroundPanel.vue";
import {getDefaultName, typeUtil} from "@/views/Editor/utils/utils";
import {isDefined} from "@vueuse/core";
import {checkUrlFileExt, getFileExt, selectFiles} from "@/utils/designUtil";
import GraphPopup from "@/views/Editor/layouts/footer/popup/graphPopup.vue";
import BackgroundPage from "@/views/Editor/layouts/footer/popup/backgroundPage.vue";
import TemplatePopup from "@/views/Editor/layouts/footer/popup/templatePopup.vue";

const {editor,keybinding} = useEditor()
const activeControls = ref(1)
const graphPopupRef = ref()
const backgroundPageRef = ref()
const templatePopupRef = ref()
const tabList = [
    {label: '文字', value: 'text', svgIcon: 'iconfont-text', svgSize: 22},
    {label: '照片', value: 'image', svgIcon: 'iconfont-image', svgSize: 24},
    // {label: '素材', value: 'graph', svgIcon: 'iconfont-sucai', svgSize: 20},
    // {label: '背景', value: 'background', svgIcon: 'iconfont-bg', svgSize: 20},
    {label: '模板', value: 'template', svgIcon: 'iconfont-template', svgSize: 20},
]
const selectTabList = [
    {label: '层级', value: '1', svgIcon: 'iconfont-text', svgSize: 22},
    {label: '颜色', value: '2', svgIcon: 'iconfont-image', svgSize: 24},
    {label: '翻转', value: '4', svgIcon: 'iconfont-bg', svgSize: 20},
]
const changeTab = (item: any) => {
    if (item.value === 'text'){
        const text = new Text({
            x:0,
            y:0,
            width:200,
            height:100,
            fontSize:30,
            editable:true,
            draggable:true,
            text:'编辑文本',
            fill:[{type:"solid",color:"#dfc672"}],
            fontFamily:"Abg"
        })
        editor.add(text)
    }else if (item.value === 'image'){
        insertImg()
    }else if (item.value === 'graph'){
        graphPopupRef.value.open()
    }else if (item.value === 'background'){
        backgroundPageRef.value.open()
    }else if (item.value === 'template'){
        templatePopupRef.value.open()
    }
}
const toggleControls =(index)=> {
    activeControls.value = index;
}
const hidePanel = () => {
    editor.selectObject(null)
    toggleControls(1)
}
watchEffect(() => {
    if (isDefined(editor.activeObject.value) && !typeUtil.isBottomCanvas(editor.activeObject.value)){
        toggleControls(2)
    }else {
        toggleControls(1)
    }
})
const componentList = computed(() => {
    const activeObject = editor.activeObject.value
    return [
        {
            name: 'TextPanel',
            component: TextPanel,
            visual: editor.activeObjectIsType('Text'),
        },
        {
            name: 'ImagePanel',
            component: ImagePanel,
            visual: editor.activeObjectIsType('Image') ||editor.activeObjectIsType('Image2'),
        },
        {
            name: 'CommonPanel',
            component: CommonPanel,
            visual: isDefined(activeObject) && !typeUtil.isVirtualOrBottom(activeObject),
        },
        {
            name: 'GroupPanel',
            component: GroupPanel,
            visual: isDefined(activeObject) && (editor.getActiveObjects().length > 1 || editor.activeObjectIsType('Group')),
        },
        {
            name: 'BackgroundPanel',
            component: BackgroundPanel,
            visual: typeUtil.isBottomCanvas(activeObject),
        },
    ]
})

// 插入图片
const insertImg = async (clear = false) => {
    selectFiles({accept: '.jpg,.png,.jpeg,.svg', multiple: false}).then((fileList) => {
        if (clear) {
            // canvas.clear()
            // workspaces.removeAll()
        }
        Array.from(fileList).forEach(async (item) => {
            // const {arrayBuffer} = await toArrayBuffer(item)
            const url = URL.createObjectURL(item);
            addImg(url)
        })
    })
}
const addImg = (url:string) => {
    let image
    if(checkUrlFileExt(url,['svg'])){
      // svg必须有高度
        image = new LeaferImage({
            name: getDefaultName(editor.contentFrame),
            url:url,
            width:150,
            height:150,
            editable: true
        });
    }else {
        image = new LeaferImage({
            name: getDefaultName(editor.contentFrame),
            url:url,
            width:150,
            editable: true
        });
    }
    editor.add(image)
}
onMounted(() => {
})
</script>

<style lang="less" scoped>
.page-box{
  //  position: fixed;
  //  bottom: 0;
  //  right: 0;
  //  left: 0;
  width: 100%;
}
.driver-mg0 {
  margin: 0;
}

</style>
<style lang="less">

.tab-svg-fill{
  // 可以根据自己的主题来修改svg的突出色
  //color: #165DFF;
  color: var(--td-tab-item-active-color, var(--td-brand-color, var(--td-brand-color-7, #0052d9)));
}
.img-auto-grid {
  --item-padding: 5px;
  --height: 80px;
  --td-upload-width: 50px;
  --td-upload-height: calc(var(--height) - (var(--item-padding) * 2));

  height: var(--height);

  .t-upload {
    gap: 0;
    padding: 0;
  }

  .t-grid-item {
    flex-basis: 60px;
    padding: var(--item-padding) 0;
  }

  .t-grid-item__image {
    height: 100% !important;
    width: 50px;
  }

  .t-grid-item__content {
    margin-top: 0;
  }
}

.img-list-grid {
  --item-padding: 5px;

  .t-upload {
    gap: 0;
    padding: 0;
  }

  .t-grid-item {
    flex-basis: 60px;
    padding: var(--item-padding) 0;
  }

  .t-grid-item__image {
    height: 200px !important;
    width: 100%;
  }

  .t-grid-item__content {
    margin-top: 0;
  }
}
.footer-radio-box{
  display: flex;
  align-items: center;
  justify-content: left;
  height: 70px;
  margin: 3px 0;
  // 设置文字不可选中
  cursor: pointer;
  -webkit-user-select: none;

  .label-text{
    font-size: 14px;
  }
  .card {
    display: block;
    position: relative;
    margin: 16px;
    border-radius: 6px;
    overflow: hidden;
    box-sizing: border-box;
    border: 1.5px solid #fff;
  }

  .card--active {
    //border-color: #0052d9;
    .t-radio {
      background-color: rgb(242, 247, 255);
      border-radius: 10px;
    }
    .t-radio__title{
      color: var(--td-tab-item-active-color, var(--td-brand-color, var(--td-brand-color-7, #0052d9)));
    }
  }

  //.card--active::after {
  //  content: '';
  //  display: block;
  //  position: absolute;
  //  left: 0;
  //  top: 0;
  //  width: 0;
  //  border: 14px solid #0052d9;
  //  border-bottom-color: transparent;
  //  border-right-color: transparent;
  //}

  .card__icon {
    display: block;
    color: #fff;
    position: absolute;
    left: 1.5px;
    top: 1.5px;
    z-index: 1;
  }
  /* 横向布局 */
  .horizontal-box {
    //width: 220px;
    display: flex;
    align-items: center;
    margin: 0;
    overflow: auto;
  }

  .horizontal-box .card {
    flex: 1;
    margin: 0;
    //min-width: 45px;
    min-width: max-content;
    max-width: max-content;
    text-align: center;
  }

  .horizontal-box {
    .t-radio--block {
      padding: 8px;
    }
  }

  .horizontal-box .card + .card {
    margin-left: 18px;
  }
}

.footer-common-box{
  display: flex;
  align-items: center;
  justify-content: center;
  //justify-content: left;
  height: 70px;
  margin: 3px 0;
  // 设置文字不可选中
  cursor: pointer;
  -webkit-user-select: none;

  .label-text{
    font-size: 14px;
  }
  .card {
    display: block;
    position: relative;
    margin: 16px;
    border-radius: 6px;
    overflow: hidden;
    box-sizing: border-box;
    border: 1.5px solid #fff;
  }

  .card--active {
    //border-color: #0052d9;
    .t-radio {
      background-color: rgb(242, 247, 255);
      border-radius: 10px;
    }
    .t-radio__title{
      color: var(--td-tab-item-active-color, var(--td-brand-color, var(--td-brand-color-7, #0052d9)));
    }
  }

  //.card--active::after {
  //  content: '';
  //  display: block;
  //  position: absolute;
  //  left: 0;
  //  top: 0;
  //  width: 0;
  //  border: 14px solid #0052d9;
  //  border-bottom-color: transparent;
  //  border-right-color: transparent;
  //}

  .card__icon {
    display: block;
    color: #fff;
    position: absolute;
    left: 1.5px;
    top: 1.5px;
    z-index: 1;
  }
  /* 横向布局 */
  .horizontal-box {
    //width: 220px;
    display: flex;
    align-items: center;
    margin: 0;
    overflow: auto;
  }

  .horizontal-box .card {
    flex: 1;
    margin: 0;
    min-width: 60px;
    max-width: max-content;
    text-align: center;
  }

  .horizontal-box {
    .t-radio--block {
      padding: 8px;
    }
  }

  .horizontal-box .card + .card {
    margin-left: 12px;
  }
}


.controls {
  width: 100%;
  opacity: 0;
  position: fixed;
  transform: translateY(100%);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none; /* 当不活跃时禁用点击 */
}

.controls.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto; /* 当活跃时启用点击 */
}

</style>
